<script setup lang="ts">
import type { Props, Emits, Type } from './utils/types'

defineOptions({
    name: 'ContentType'
})

const $props = withDefaults(defineProps<Props>(), {})
const $emit = defineEmits<Emits>()

const type = shallowRef<Type>()

watch($props, (newValue) => {
    if (!newValue.titles) return
    type.value = newValue.titles[0].type
}, { immediate: true })

function handleChangeType(clicktype: any) {
    type.value = clicktype
    $emit('onChangeType', (type.value as Type))
}

</script>

<template>
    <div class="content-type">
        <div v-for="(item, index) in titles" :key="index" :class="{ active: type == item.type }"
            @click="handleChangeType(item.type)">
            {{ item.title }}
        </div>
    </div>
</template>

<style lang="scss" scoped>
.content-type {
    display: flex;
    align-items: center;

    div {
        color: rgba(140, 142, 143, 1);
        font-size: 13px;
        height: 32px;
        line-height: 32px;
        padding: 0 26px;
        cursor: pointer;
        text-wrap: nowrap;
        white-space: nowrap;
        border: 1px solid transparent;
    }

    .active {
        border-radius: 21px;
        background-color: rgba(255, 255, 255, 1);
        color: var(--primary-color);
        font-size: 13px;
        text-align: center;
        border: 1px solid var(--primary-color);
    }
}
</style>